<template>
  <div>
    <div class="header">
      <tr>
        <td>
          <!-- u_name: '',
      u_team: '',
      u_birthday: '',
      u_littleName: '',
      u_postion: '',
      u_learnTime: [] -->

          <!-- <ManyCheck class="header" v-model="teamList" @sigleChecked="sigleChecked($event)" @toggleChecked="toggleChecked($event)"></ManyCheck> -->
          <!-- <ManyCheck class="header" v-model="posList" @sigleChecked="sigleChecked($event)" @toggleChecked="toggleChecked($event)"></ManyCheck> -->

          <select id="team" v-model= "u_currentData.u_team">
            <option value="-1" selected>请选择队名</option>
          </select>
          <select id="postion" v-model= "u_currentData.u_postion">
            <option value="-1" selected>请选择位置</option>
          </select>
          <input type="text" id="name" placeholder="请输入姓名"  v-model= "u_currentData.u_name">
          <input type="text" id="littlename" placeholder="请输入昵称" v-model= "u_currentData.u_littleName">
          <!-- <input type="text" id="team" placeholder="请输入队伍" v-model= "u_currentData.u_team"> -->
          <!-- <input type="text" id="birthday" placeholder="请输入生日" v-model= "u_currentData.u_birthday"> -->
          <input type="text" id="birthday" placeholder="请输入生日" v-model= "u_currentData.u_birthday" @click="addTime">
          <!-- <StudentTimeConf @studentTimeChange="studentTimeChange"></StudentTimeConf> -->

          <input type="button" id="learnTime" placeholder="请输入闲、忙时" value= "忙、闲时段" @click="stuentTime">
          <div>
            <table id="table1" class="table-goods">
              <colgroup>
                <col name="星期" width="15%">
                <col name="类型" width="15%">
                <col name="说明" width="55%">
              </colgroup>
              <thead>
                <tr>
                  <th>星期</th>
                  <th>类型</th>
                  <th>课时</th>
                </tr>
              </thead>
              <tr v-for="(item, index) in u_currentData.u_learnTime" :key="index" :id="'tr' + index">
                <!-- <td>{{item.week}}</td>
                <td>{{item.type}}</td> -->
                <td>{{weekTrans(item.week)}}</td>
                <td>{{useTypeTrans(item.type)}}</td>
                <td>{{item.time[0]}}-{{item.time[1]}}</td>
              </tr>
            </table>
            <span></span>
          </div>
          <!-- <input type="text" id="learnTime" placeholder="请输入闲、忙时" v-model= "u_currentData.u_learnTime" @click="stuentTime"> -->
        </td>
      </tr>
    </div>
    <div>
      <input type="button" value="添加">
      <input type="button" value="test" @click="test">
      <input type="button" value="currentis" @click="currentis">
    </div>
  </div>
</template>

<script>
import scheduleData from '@/data/schudle'
// import CheckText from '@/components/tools/checkText'
// import ManyCheck from '@/components/tools/manyCheck'
// import FullCalendar from 'vue-fullcalendar/'
import FullCalendar from '@/components/tools/vue-fullcalendar/fullcalendar'
import StudentTimeConf from '@/components/tools/studentTime'
import Ppp from '@/data/ppp'

// import Calendar from '@/components/tools/vue-calendar-component'
// import Ppp from '@/data/ppp.js'
export default {
  name: 'AddStudent',
  components: { 'full-calendar': FullCalendar, StudentTimeConf },
  computed: {
    showLearnTimeSeg () {
      console.log('u_currentData.u_learnTime=', this.u_currentData.u_learnTime)
      let ss = ''
      for (var seg of this.u_currentData.u_learnTime) {
        ss = ss + seg.time[0]
      }
      return ss
    }
  },
  beforeMount () {
    // this.yearList = scheduleData.yearList
    this.teamList = scheduleData.teamList.data
    this.posList = scheduleData.posList.data
    console.log('mounted==yearList=============================' + this.teamList, this.posList)
  },
  mounted () {
    console.log('mounted==Main=============================' + this.typeTime)
    this.getCurrentData()
    // var that = this
    // Ppp.$on('sendTime', function (msg) {
    //   console.log(msg)
    //   that.dealTime(msg)
    // })
    // this.ubirthday = this.$router.query.birthday

    var that = this
    // 生日
    Ppp.$on('studentAddSelday', function (msg) {
      console.log('student-add-selday=============', msg)
      console.log(msg)
      that.studentAddSelday(msg)
    })
    // 可选时间
    Ppp.$on('u_addStudentTimeSeg', function (msg) {
      console.log('u_addStudentTimeSeg=============', msg)
      console.log(msg)
      that.studentAddSelTimeSeg(msg)
    })
    this.myStudents = scheduleData.students
    this.selTeamData()
    this.selPostionData()
  },
  watch: {
    // 'u_birthday.value': function (val, oldval) {
    //   console.log('00000000000000000=' + val + ',' + oldval)
    // }
  },
  methods: {
    stuentTime () {
      this.$router.push({path: '/Main/student/addstudentTime'})
    },
    useTypeTrans (id) {
      console.log('useTypeTrans=', id)
      switch (id) {
        case '1': return '可用'
        case '2': return '不可用'
        default: return '11'
      }
    },
    weekTrans (id) {
      console.log('weekTrans=', id)
      switch (id) {
        case '1': return '星期一'
        case '2': return '星期二'
        case '3': return '星期三'
        case '4': return '星期四'
        case '5': return '星期五'
        case '6': return '星期六'
        case '7': return '星期日'
      }
    },
    studentTimeChange (dd, yy) {
      console.log('dd=', dd, 'yy=', yy)
    },
    selPostionData () {
      let el = document.getElementById('postion')
      for (var pos of this.posList) {
        el.options.add(new Option(pos.caption, pos.id))
      }
    },
    selTeamData () {
      let el = document.getElementById('team')
      for (var team of this.teamList) {
        el.options.add(new Option(team.caption, team.id))
      }
      // el.options.add(new Option('之光', '1'))
      // el.options.add(new Option('之亿', '2'))
    },
    getCurrentData () {
      let ss = window.sessionStorage.getItem('u_currentData')
      if (ss) {
        this.u_currentData = JSON.parse(ss)
      }
    },
    currentis () {
      console.log('currentis  = = this.u_birthday=' + this.u_currentData.u_birthday)
      console.log('currentis  = = this.u_team=' + this.u_currentData.u_team)
      console.log('currentis  = = this.u_name=' + this.u_currentData.u_name)
      console.log('currentis  = = this.u_postion=' + this.u_currentData.u_postion)
      console.log('currentis  = = this.u_littleName=' + this.u_currentData.u_littleName)
      // let ss = document.getElementById('birthday')
      // ss.value = '222222'
    },
    test () {
      console.log('this.ubirthday=' + this.u_currentData.u_birthday)
      if (this.u_currentData.u_birthday === '222') {
        this.u_currentData.u_birthday = '333'
      } else {
        this.u_currentData.u_birthday = '222'
      }
    },
    studentAddSelday (msg) {
      console.log('before》》》》studentAddSelday-=-=' + msg + ',u_birthday=' + this.u_currentData.u_birthday)
      let ss = '' + msg.getFullYear() + msg.getMonth() + msg.getDate()
      this.u_currentData.u_birthday = ss

      window.sessionStorage.setItem('u_currentData', JSON.stringify(this.u_currentData))

      // let ss = document.getElementById('birthday')
      // ss.value = '222222'
      console.log('after》》》》》studentAddSelday-=-=' + msg + ',u_birthday=' + this.u_currentData.u_birthday)
      // document.getElementById('birthday').value = '112121221'
    },
    studentAddSelTimeSeg (msg) {
      this.u_currentData.u_learnTime = msg

      window.sessionStorage.setItem('u_currentData', JSON.stringify(this.u_currentData))

      // let ss = document.getElementById('birthday')
      // ss.value = '222222'
      console.log('studentAddSelTimeSeg-=-=', msg, ',u_currentData=', this.u_currentData)
      // document.getElementById('birthday').value = '112121221'
    },
    addTime () {
      this.$router.push({path: '/Main/student/selectBirthday'})
    },
    sigleChecked (index) {
      // console.log('0-0-0-0-0-0-0-0-0-0-==' + ',=' + index + '=' + this.yearList.data[index].val)
      // this.yearList.data[index].val = !this.yearList.data[index].val
    },
    toggleChecked (ev) {
      // console.log('0-0-0-0-0-0-0-0-0-0-==' + ',=' + ev)
      // for (var item of this.yearList.data) {
      //   item.val = ev
      // }
    },
    toMenu (index) {
      this.$router.push({path: '/pub/manageSchedule', query: {data: this.myStudents[index]}})
    },
    // 选择月份
    changeMonth (start, end, current) {
      console.log('changeMonth', start, end, current)
    },
    // 点击事件
    eventClick (event, jsEvent, pos) {
      console.log('eventClick', event, jsEvent, pos)
    },
    // 点击当天
    dayClick (day, jsEvent) {
      console.log('dayClick', day, jsEvent)
    },
    // 查看更多
    moreClick (day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent)
    }
  },
  data () {
    return {
      monthData: [],
      u_currentData: {
        u_name: '',
        u_team: '',
        u_birthday: '111',
        u_littleName: '',
        u_postion: '',
        u_learnTime: []
      }
      // l_year: [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 201],
      // l_month: [1, 2, 3, 4,5,6,7,8,9,10,11,12],
      // l_day: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head{
  width: 100%;
  background-color: turquoise;
}
.table-goods {
    width: 100%;
    top: 0px;
    margin-top: 15px;
    color: rgb(15, 15, 15);
    table-layout: fixed;
    /* border-collapse: collapse; */
    user-select: none;
    border: 2px solid rgba(95, 95, 121, 0.116);
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(214, 119, 11, 0.1);
  }
  .table-goods td {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    /* padding-left: 12px; */
    border: 2px solid rgba(192, 202, 189, 0.26);
    /* background-color: rgba(149, 191, 103, .1); */
    /* display: inline-block; */
  }
  .table-goods th {
    line-height: 30px;
    font-size: 12px;
    background-color: rgba(141, 103, 191, 0.1);
  }
  .time1 {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* clear: both; */
  }
  .opt {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* height: 40px; */
    /* text-align: center;
    vertical-align: middle;
    display: table-cell; */
    /* clear: both; */
  }
</style>
